<template>
  <div id="main" ref="eachartDom"></div>
</template>

<script setup>
import * as echarts from "echarts";
const eachartDom = ref(null);
let myChart = null;
onMounted(() => {
  //获取dom元素大小
  //   const w = eachartDom.value.offsetWidth;
  //   const h = eachartDom.value.offsetHeight;
  //  基于准备好的dom，初始化echarts实例
  myChart = echarts.init(eachartDom.value);
  //全制图表
  myChart.setOption({
    title: {
      text: "产品进7日数据变化",
      left: "center",
    },
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  });
});
//自适应
window.addEventListener("resize", () => {
  //重新渲染
  myChart && myChart.resize();
});
//记得卸载当前的myChart -当前组件卸载
onUnmounted(() => {
  myChart.dispose();
});
</script>

<style scoped lang="less">
#main {
  height: 300px;
  padding-top: 10px;
  background-color: #fff;
  margin: 0 20px;
}
</style>
